<template>
  <div>
    <!-- 上部分 -->
    <el-card class="box-card" style="margin:20px 0px">
      <CategorySelect @getCategoryId="getCategoryId" :show="isShowTable"/>
    </el-card>


    <!-- 下部分 -->
    <el-card class="box-card">
      <!-- 商品属性列表 -->
      <div v-show="isShowTable">
        <el-button
          type="primary"
          icon="el-icon-plus"
          :disabled="!cForm.category3Id"
          @click="addAttr"
          >添加属性</el-button
        >
        <!-- 表格 -->
        <el-table style="width: 100%" border :data="attrList">
          <el-table-column type="index" label="序号" width="80" align="center">
          </el-table-column>
          <el-table-column prop="attrName" label="属性名称" width="150">
          </el-table-column>
          <el-table-column prop="prop" label="属性值列表" width="width">
            <template slot-scope="{ row, $index }">
              <el-tag
                type="success"
                style="margin: 0px 5px"
                v-for="(attrValue, index) in row.attrValueList"
                :key="attrValue.id"
                >{{ attrValue.valueName }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="150">
            <template slot-scope="{ row, $index }">
              <el-button
                type="warning"
                icon="el-icon-edit"
                size="mini"
                @click="updateAttr(row)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 添加与修改商品属性的结构 -->
      <div v-show="!isShowTable">
        <el-form :inline="true" ref="form" label-width="80px" :model="attrInfo">
          <el-form-item label="属性名">
            <el-input placeholder="请输入属性名" v-model="attrInfo.attrName"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" icon="el-icon-plus" @click="addAttrValue" :disabled="!attrInfo.attrName ">添加属性值</el-button>
        <el-button>取消</el-button>
        <el-table style="width: 100%; margin: 20px 0px" border :data="attrInfo.attrValueList">
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="80"
          ></el-table-column>
          <el-table-column
            prop="prop"
            label="属性值名称"
            width="width"
          >
            <template slot-scope="{row,$index}">
              <el-input v-model="row.valueName" placeholder="请输入属性值名称" v-if="row.flag" @blur="tolook(row)" @keyup.native.enter="tolook(row)" :ref="$index" size="mini"></el-input>
              <span v-else @click="toEdit(row,$index)" style="display:block">{{row.valueName}}</span>
            </template>
          </el-table-column>
          <el-table-column
            type="index"
            label="操作"
            width="width"
          >
            <template slot-scope="{row,$index}">
              <!-- 气泡确认框   -->
              <el-popconfirm :title="`这是一段内容确定删除${row.valueName}吗？`" @onConfirm="deleteAttrValue($index)">
                <el-button type="danger" icon="el-icon-delete" size="mini" slot="reference"></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" :disabled="attrInfo.attrValueList.length<1" @click="addOrUpdateAttr">保存</el-button>
        <el-button @click="isShowTableFunction">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import CategorySelect from "@/components/CategorySelect";
export default {
  name: "Attr",
  components: {
    CategorySelect,
  },
  data() {
    return {
      attrList: [], //平台属性字段
      isShowTable: true, //控制下部分的切换
      cForm: {}, //收集一级分类二级分类三级分类的ID
      attrInfo: {
        //收集新增属性或修改属性的变量
        attrName: "",//属性名
        attrValueList: [//属性值
          // {
          //   attrId: 0,//相应的属性ID
          //   id: 0,//属性值ID
          //   valueName: "",
          // },
        ],
        categoryId: 0,//三级分类ID
        categoryLevel: 3,//因为服务器也要需要区分几级ID
      },
    };
  },
  methods: {
    //子组件的自定义事件回调
    getCategoryId(cForm) {
      console.log(cForm);
      this.getAttrList(cForm);
      this.cForm = cForm;
    },
    //获取平台属性数据
    async getAttrList(cForm) {
      let result = await this.$API.attr.reqAttrList(
        cForm.category1Id,
        cForm.category2Id,
        cForm.category3Id
      );
      this.attrList = result.data;
      console.log(this.attrList);
    },
    //添加属性值按钮
    addAttrValue(){
     this.attrInfo.attrValueList.push({
      attrId:this.attrInfo.Id,
      valueName:"",
      flag:true
     })
     //flag属性:给每一个属性值添加一个标记flag，用户切换查看模式与编辑模式，好处，每一个属性值可以控制自己的模式切换
     //当前flag属性，响应式数据(数据变化视图跟着变化)
     this.$nextTick(()=>{
      this.$refs[this.attrInfo.attrValueList.length-1].focus()
     })
    },
    //添加属性
    addAttr(){
      this.isShowTable = false
      this.attrInfo={
        //收集新增属性或修改属性的变量
        attrName: "",//属性名
        attrValueList: [//属性值
          // {
          //   attrId: 0,//相应的属性ID
          //   id: 0,//属性值ID
          //   valueName: "",
          // },
        ],
        categoryId: this.cForm.category3Id,//三级分类ID
        categoryLevel: 3,//因为服务器也要需要区分几级ID
      }
    },
    //修改属性值按钮
    updateAttr(row){
      this.isShowTable = false
      this.attrInfo=JSON.parse(JSON.stringify(row))//JSON.stringify(row)将对象转换成字符串，JSON.parse()然后再转换成对象类型，可以避免浅拷贝复杂数据类型的只修改指针而非修改值
      this.attrInfo.attrValueList.forEach(item=>{
        //这样书写 也可以给属性值添加flag自动， 但是会发现视图不会跟着 变化(因为flag不是 响应式数据)
        //因为Vue无法探测普通的新增property,这样书写的属性并非响应式属性(数据变化视图跟这边)
        this.$set(item,'flag',false)
      })
    },
    //失去焦点或回车键切换为查看模式
    tolook(row){
      if(row.valueName.trim()==""){//判断用户有没有输入属性值 如果没有而且还失去焦点或回车键就删除该行
        // this.$message("请你输入一个正确的属性值")
        let index=this.attrInfo.attrValueList.findIndex(item=>item==row)
        this.attrInfo.attrValueList.splice(index,1)
        return
      }
      //新增的属性值不能与已有属性值重复
      let isRepat = this.attrInfo.attrValueList.some(item=>{
        //需要将row从数组里面判断的时候去除
        //row最新新增的属性值[数组的最后一项元素]
        //判断的时候，需要把已有的数组当中新增的这个属性值去除
        if(row!==item){
          return row.valueName==item.valueName
        }
      })
      if(isRepat) return
      //row: 形参是当前用户添加的最新的属性值
      //当前编辑模式变为查看模式[让input消失， 显示span]
      row.flag=false
    },
    //点击span的回调，切为编辑模式
    toEdit(row,index){
      this.attrInfo.attrValueList.forEach(item=>{
        item.flag=false
      })
      row.flag=true
      //获取input节点，实现自动聚焦
      //需要注意: 点击span的时候， 切换为input变为编辑模式，但是需要注意，对于浏览器而言， 页面重绘与重拍耗时间的
      //点击span的时候，重绘重拍一个input它是需要耗费事件，因此我们不可能一点击span立马获取到input
      //$nextTick,当节点渲染完毕了，会执行一次
      this.$nextTick(()=>{
        //获取相应的input表单元素实现聚焦
        this.$refs[index].focus()
      })
    },
    isShowTableFunction(){
      this.isShowTable=true
      this.attrInfo={
         //收集新增属性或修改属性的变量
        attrName: "",//属性名
        attrValueList: [//属性值
          // {
          //   attrId: 0,//相应的属性ID
          //   id: 0,//属性值ID
          //   valueName: "",
          // },
        ],
        categoryId: 0,//三级分类ID
        categoryLevel: 3,//因为服务器也要需要区分几级ID
      }
    },
    deleteAttrValue(index){//气泡确认框回调函数
      this.attrInfo.attrValueList.splice(index,1)
    },
    async addOrUpdateAttr(){//保存按钮：进行添加属性或者修改属性的操作
      this.attrInfo.attrValueList=this.attrInfo.attrValueList.filter(item=>{
        if(item.valueName!=""){
          delete item.flag
          return true
        }
      })
      console.log(2);
      try {
        //发请求
        await this.$API.attr.reqAddAttr(this.attrInfo);
        this.isShowTable=true
        this.$message({type:'success',message:"保存成功"})
        this.getAttrList()
      } catch(error){
        this.$message("保存失败")
      }
    }
  },
};
</script>

<style>
.box-card {
  width: 100%;
}
</style>